<template>
  <div class="myblog">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <span>{{ webAddress }}</span>
        </div>
      </el-col>
    </el-row>

    <el-row type="flex" class="titles-row" justify="center">
      <!-- 博客列表 -->
      <el-col
        :span="12"
        :pull="1"
        v-if="titles != [] && titles != null && titles.length != 0"
      >
        <el-row
          type="flex"
          justify="space-around"
          v-for="item in titles"
          v-bind:key="item.id"
        >
          <el-col :span="24" class="title">
            <!-- 文章 -->
            <div class="titles-content bg-purple" @click="atBlog(item.id)">
              <el-row type="flex" class="title-body" justify="center">
                <el-col :span="8">
                  <img
                    :src="
                      item.blogTitleImg
                        ? item.blogTitleImg
                        : '/static/images/header.jpg'
                    "
                    class="bk-img"
                  />
                </el-col>
                <el-col :span="14">
                  <!-- 文章主体 -->
                  <div class="title-content">
                    <!-- 文章标题 -->
                    <p class="title-title">
                      {{ item.blogTitleHeader }}
                    </p>
                    <div class="title-msg">
                      <!-- 文章介绍 -->
                      <p>
                        {{ item.blogTitleContent }}
                      </p>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <!-- 文章信息 -->
              <el-row type="flex" class="row-bg" justify="space-around">
                <!-- 发布时间 -->
                <el-col :span="6">
                  <div class="bk-content">
                    <i class="el-icon-timer bk-info"
                      >&nbsp;{{ item.blogTitlePostTime }}</i
                    >
                  </div>
                </el-col>

                <!-- 作者 -->
                <el-col :span="8">
                  <div class="bk-content">
                    <i class="el-icon-user bk-info"
                      >&nbsp;{{ item.blogTitleAuthor }}</i
                    >
                  </div>
                </el-col>

                <!-- 标签 -->
                <el-col :span="8">
                  <div class="bk-content">
                    <i class="el-icon-price-tag bk-info"
                      >&nbsp;{{ item.blogTitleLabel }}</i
                    >
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <!-- 分页 -->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          background
          :page-size="limit"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>

      <el-col :span="12" :pull="1" v-else>
        <!-- <div style="text-align: center">
          还未有相关文章哦，试着发表一篇吧
          <br />
          <el-button type="primary" round @click="prev()">返回主页</el-button>
        </div> -->
        <el-empty description=" ">还未有相关文章哦，试着发表一篇吧</el-empty>
      </el-col>

      <!-- 用户 -->
      <el-col :span="6" :push="1">
        <el-row type="flex">
          <div class="userInfo_table">
            <el-row type="flex" justify="center">
              <el-col :span="24">
                <div class="myself_head">
                  <img :src="authorAavatar=='null' || authorAavatar=='' || authorAavatar==null ? '/static/images/header.jpg' : authorAavatar" />
                </div>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center">
              <el-col :span="24">
                <div class="myself_name">
                  <p>{{ username }}</p>
                </div>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center">
              <el-col :span="24">
                <div class="myself_self_content">
                  <p>{{ selfContent=='null' ? '' : selfContent }}</p>
                </div>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center" v-show="isLogin">
              <el-col :span="24">
                <div class="myself_post_title">
                  <router-link
                    :to="{ name: 'postTitle', params: { tagle: 'Myblog' } }"
                    tag="button"
                    class="nav-list-item-a postTitle"
                  >
                    <i class="el-icon-upload2">发表博客</i>
                  </router-link>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-row>

        <el-row type="flex" class="tagsHeader">
          <el-col :span="24">
            <el-row>
              <div class="tagsCloud">
                <i class="fa fa-tags">标签云</i>
              </div>
            </el-row>

            <el-row type="flex">
              <el-col :span="24">
                <div class="tags">
                  <el-tag
                    v-for="item in tags"
                    v-bind:key="item.id"
                    class="el_tags"
                    @click="tagClick(item.tag)"
                  >
                    {{ item.tag }}
                  </el-tag>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { setLocalStorage, getLocalStorage } from "@/util/local-storage.js";
import axios from "axios";

export default {
  name: "Myblog",
  inject: ["routerRefresh", "getloginInfo"],
  data() {
    return {
      tagName: "",
      username: "未登录",
      isLogin: false,
      selfContent: "",
      authorAavatar:"/static/images/header.jpg",
      titles: [],
      total: 10,
      page: 1,
      limit: 5,
      webAddress: "首页",
      tags: [],
      select: "",
      input: "",
    };
  },
  methods: {
    getSearchList() {
      let params = {
        page: this.page,
        limit: this.limit,
        select: this.select,
        input: this.input,
      };

      axios
        .post("http://localhost:8083/titles/searchTitleList", params)
        .then((res) => {
          if (res.data.errno != 0) {
            this.$notify.error({
              title: res.data.errmsg,
              showClose: false,
            });
          } else {
            console.log(res);
            this.total = res.data.data.total;
            this.titles = res.data.data.list;
          }
        });
    },
    tagClick(tag) {
      this.getTitles(tag);
    },
    atBlog(itemId) {
      this.$router.replace({ name: "BlogDetail", params: { id: itemId } });
    },
    prev() {
      this.$router.replace({ name: "Myblog" });
      this.routerRefresh();
    },
    getTitles(tagName) {
      let params = {
        page: this.page,
        limit: this.limit,
        tagName: tagName != null ? tagName : "",
      };
      console.log("tagName:", params.tagName);
      axios
        .get("http://localhost:8083/titles/getList", { params })
        .then((res) => {
          if (res.data.errno != 0) {
            this.$message({
              duration: 1000,
              message: res.data.errmsg,
              center: true,
              type: "error",
            });
            return;
          }
          this.total = res.data.data.total;
          this.titles = res.data.data.list;
          console.log("titles:", this.titles);
        });
    },

    handleCurrentChange() {
      this.getTitles();
    },

    getUserInfo() {
      this.getloginInfo().then((res) => {
        if (res) {
          this.isLogin = res;
          this.username = !!localStorage.getItem("username")
            ? localStorage.getItem("username")
            : "未登录";
          this.selfContent = !!localStorage.getItem("selfContent")
            ? localStorage.getItem("selfContent")
            : "";
        } else {
          this.username = "未登录";
          this.selfContent = "";
        }
      });
    },
    getTags() {
      axios.get("http://localhost:8083/tag/getTags").then((res) => {
        this.tags = res.data.data.list;
      });
    },
  },
  created() {
    this.authorAavatar=localStorage.getItem("avatar");
    console.log("this.authorAavatar",this.authorAavatar)
    console.log("!!this.$route.query.tag:", this.$route.query.tag);
    this.select = !!this.$route.query.select
      ? this.$route.query.select
      : "titleName";
    this.input = !!this.$route.query.input ? this.$route.query.input : "";

    this.tagName = this.$route.query.tag;
    this.getUserInfo();
    this.getTitles(this.tagName);
    if (this.input != "") {
      console.log("input:", this.input);
      this.getSearchList();
    }
    this.getTags();
  },
};
</script>


<style scoped>
.el_tags {
  color: #5a5454;
  margin: 5px;
  cursor: pointer;
}
.el_tags:hover {
  background-color: #01aaed;
}
.tagsHeader {
  padding: 10px;
  padding-left: 15px;
  background-color: #fff;
  box-shadow: 0 1px 8px #5a5454;
}
.tagsCloud {
  color: #01aaed;
  border-bottom: #ecf5ff 1px solid;
  margin-bottom: 10px;
}
.postTitle {
  height: 30px;
  background: #59f04c80;
  font-size: medium;
  font-family: SimHei;
  width: 100%;
  margin-bottom: 5px;
  border-radius: 5px;
  border: 1px sandybrown solid;
}

.postTitle:active {
  background: #7eb37980;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.myself_self_content {
  font-size: 16px;
  font-weight: bold;
  font-family: FangSong;
}

.myself_name {
  font-size: 32px;
  font-weight: bold;
  font-family: STXinwei;
  margin-bottom: -20px;
}

.userInfo_table {
  text-align: center;
  padding: 0 15px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  box-shadow: 0 1px 8px #5a5454;
}

.myself_head img {
  width: 60%;
  height: 60%;
  margin: 20px;
  border-radius: 1000px;
}

.bk-content {
  display: block;
  width: 100%;
  height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}

.bk-info {
  font-size: 13px;
  padding: 2px;
  color: #114e65;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.myblog {
  padding-left: 100px;
  padding-right: 100px;
}

.title-content {
  font-size: 24px;
  display: block;
}

.title-title {
  /* width: 100%; */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.title-msg {
  font-size: 14px;
  display: block;
  margin-top: 10px;
  text-indent: 2em;
}

.title-msg p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.titles-content {
  border-radius: 2px;
  box-shadow: 0 2px 10px 0 rgb(93, 97, 93);
  border-left: #fff 4px solid;
  border-right: #fff 4px solid;
}

.titles-content:hover {
  border-left: rgb(115, 172, 120) 4px solid;
  border-right: rgb(115, 172, 120) 4px solid;
}

.bk-img {
  width: 200px;
  height: 160px;
}

.title-body {
  padding-top: 10px;
}

.titles-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #fff;
}

.grid-content {
  display: flex;
  justify-content: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 2px 2px 2px 1px rgb(99, 90, 90);
  border-left: rgb(32, 92, 37) 5px solid;
  min-height: 36px;
  text-align: center;
  margin: auto;
  font-family: KaiTi;
  font-size: 20px;
}

.row-bg {
  padding: 10px 0;
  margin-bottom: 20px;
  /* background-color: #f9fafc; */
}
</style>
